咒語:你是個React JS 工程師　幫我編寫App.jsx 使用 React router 包含首頁 登入 商品介紹 購物車頁 內容
解析: 1.請他扮演的腳色 2.要幫忙寫的文件 3.使用哪種技術 4.包含哪些文件內容

一.首先，確保你已經安裝了React和React Router
(會確認你的安裝)

npm install react react-dom react-router-dom

二.把以下內容貼上app.JSX

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

// 首頁組件
import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';

// 首頁組件
function Home() {
  return <h2>首頁</h2>;
}

// 登入組件
function Login() {
  return <h2>登入</h2>;
}

// 商品介紹組件
function Product() {
  return <h2>商品介紹</h2>;
}

// 購物車頁面組件
function Cart() {
  return <h2>購物車頁</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">首頁</Link>
            </li>
            <li>
              <Link to="/login">登入</Link>
            </li>
            <li>
              <Link to="/product">商品介紹</Link>
            </li>
            <li>
              <Link to="/cart">購物車</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/product" element={<Product />} />
          <Route path="/cart" element={<Cart />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

這樣簡單的首頁就完成了